<template>
	<view>
		<view class="zhtx-imgs">
			<view class="zhtx-single" v-for="(item, index) in fileList" :key="index">
				<image src="./images/pdf.png" mode="" v-if="fileHz(item.filename) == 'pdf'"></image>
				<image src="./images/zip.png" mode=""
					v-else-if="fileHz(item.filename) == 'zip'|| fileHz(item.filename) == 'rar'"></image>
				<image src="./images/ppt.png" mode="" v-else-if="fileHz(item.filename) == 'ppt'"></image>
				<image src="./images/xls.png" mode=""
					v-else-if="fileHz(item.filename) == 'xls' || fileHz(item.filename) == 'xlsx'"></image>
				<image src="./images/doc.png" mode=""
					v-else-if="fileHz(item.filename) == 'doc' || fileHz(item.filename) == 'docx'"></image>
				<image :src="item.filepath" mode="" class="images" v-else @click="previewImg(item.filepath)"></image>
				<text class="filename">{{item.filename}}</text>
				<view class="icon-close" @click.stop="deleteItem(item)">
					<image class="delimg" src="./images/del.png" mode=""></image>
				</view>
			</view>
			<view class="zhtx-single zhtx-addNew" @tap="chooseFile">
				<text class="zhtx-add">+</text>
			</view>
		</view>
	</view>
</template>

<script>
	let toast = msg => {
		uni.showToast({
			title: msg,
			icon: 'none'
		});
	}
	export default {
		props: {
			uFileList: {
				type: Array, //附件列表
				default () {
					return {}
				}
			},
			uploadFileUrl: {
				type: String,
				dafault: '#' // 上传文件的服务器url
			},
			header: {
				type: Object, //上传图片到服务器时，HTTP 请求 Header
				default () {
					return {}
				}
			},
			formData: {
				type: Object,
				default () {
					return {} //用于在服务端接收数据
				}
			},
			canUploadFile: { //是否更新
				type: Boolean,
				default: true
			},
			count: {
				type: Number,
				dafault: 1 // 上传文件的服务器url
			},
		},
		computed: {
			fileList: {
				get() {
					return this.uFileList
				}
			}
		},
		data() {
			return {
				fileUrlList: []
			};
		},
		mounted() {},
		methods: {
			/* 截取后缀名 */
			fileHz(name) {
				//获取最后一个.的位置
				var index = name.lastIndexOf(".");
				//获取后缀
				var ext = name.substr(index + 1);
				console.log(ext)
				return ext
			},
			//预览
			previewImg(e) {
				let newArr = [];
				newArr.push(e)
				uni.previewImage({
					loop: true,
					urls: newArr
				});
			},
			//删除
			deleteItem(infos) {
				console.log(infos)
				uni.showModal({
					title: '提示',
					content: '确定要删除此项吗？',
					success: res => {
						if (res.confirm) {
							this.fileList.splice(this.fileList.findIndex(item => item === infos), 1);
							this.fileUrlList.splice(this.fileList.findIndex(item => item === infos.filepath),
								1);
						}
					}
				});
			},
			chooseFile() {
				//双重保证
				if(this.count < this.fileList){
					toast("文件一次最多上传"+this.count+"个");
					return
				}
				let canUploadFile = this.canUploadFile;
				let tempFiles;
				let sourceTypes;
				if (canUploadFile) {
					uni.chooseFile({
						type: "all",
						count: this.count, 
						extension: ['.doc', '.docx', '.pdf', '.xlsx', '.xls', '.zip', ".rar", '.ppt', '.png',
							'.jpg', '.jpeg'
						],
						success: res => {
							console.log(res);
							this.fileUrlList = res.tempFilePaths;
							let len = 0;
							res.tempFiles.forEach((item,index)=>{
								len++;
								let info = {
									filename: item.name,
									filepath: item.path
								}
								let flag = /\.(doc|docx|xls|xlsx|ppt|pdf|zip|rar|jpg|png|jpeg)$/.test(item.name.toLowerCase())
									if(flag){
										this.fileList.push(info);
										if(len = res.tempFiles.length){
											this.$emit('update:uFileList', this.fileList);
											this.$forceUpdate();
										}
									}else{
										toast("请选择.doc、.docx、.xls、.xlsx、.ppt、.pdf、.zip、.rar格式文件")
										return
									}
							})
						}
					});
				}
			},
			/* 上传 */
			upload(urls) {
				if(this.fileUrlList.length<1){
					toast("请选择文件再上传");
					return
				}
				uni.showLoading({
					title: '上传中...',
					mask: false
				});
				let headers = {};
				headers.Authorization = '';
				var filelist = [];
				for (var i = 0; i < this.fileUrlList.length; i++) {
					var obj = {};
					obj.name = 'file';
					obj.uri = this.fileUrlList[i];
					filelist.push(obj);
				}
				console.log(this.formData)
				uni.uploadFile({
					url: this.uploadFileUrl,
					files: filelist,
					header: headers,
					formData: this.formData,
					success: (res) => {
						uni.hideLoading()
						if (res.statusCode == 200) {
							this.$emit('uploadSuccess', JSON.parse(res.data));
						} else {
							toast("请求错误" + res.statusCode)
						}
			
					},
					fail: (err) => {
						uni.hideLoading()
					}
				})
			}
		},
	}
</script>

<style scoped>
	.zhtx-imgs {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
	}

	.zhtx-del {
		position: absolute;
		width: 35rpx;
		height: 35rpx;
		background: #fff;
		color: #fff;
		top: 0;
		text-align: center;
		right: 0;
		line-height: 28rpx;
		font-size: 30rpx;
		z-index: 100;
	}

	.icon-close {
		position: absolute;
		top: -30upx;
		right: -25upx;
		background-color: #fff;
		border-radius: 50%;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.delimg{
		display: inline-block;
		width: 100%;
		height: 100%;
	}
	.zhtx-single {
		position: relative;
		width: 170rpx;
		height: 160rpx;
		margin: 10rpx;
		border: 2rpx solid #D9D9D9;
		background-color: #f3f3f3;
		margin-right: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.zhtx-single:nth-child(3n) {
		margin-right: 0;
	}

	.zhtx-single>image {
		width: 90rpx;
		height: 90rpx;
	}

	.filename {
		font-size: 24rpx;
		margin-top: 10rpx;
		color: #000000;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: center;
	}

	.zhtx-addNew {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	text {
		font-size: 50rpx;
		color: #999;
	}

	image {
		width: 100%;
		height: 100%;
		display: block;
	}
	.images{
		width: 100% !important;
		flex: 1;
	}
</style>
